<!DOCTYPE HTML>
<html  xmlns:th="http://www.thymeleaf.org">
<head th:include="_meta :: header">
<title>添加</title>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row">
        <form class="layui-form form form-horizontal"  id="form-video-add" action="#" th:action="@{/admin/video/add}">
            <div class="layui-form-item">
                <label class="layui-form-label"><span class="x-red">*</span>稿件id：</label>
                        <div class="layui-input-inline">
                        <input type="layui-input" class="layui-input" t name="draftId"  placeholder="修改稿件id" id="draftId"/>
                        </div>
                        </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><span class="x-red">*</span>稿件类型：</label>
                        <div class="layui-input-inline">
                        <input type="layui-input" class="layui-input" t name="draftType"  placeholder="修改稿件类型" id="draftType"/>
                        </div>
                        </div>
<!--            <div class="layui-form-item">-->
<!--                <label class="layui-form-label"><span class="x-red">*</span>上传视频：</label>-->
<!--                        <div class="layui-input-inline">-->
<!--                        <input type="layui-input" class="layui-input" t name="videoUrl"  placeholder="上传视频" id="videoUrl"/>-->
<!--                        </div>-->
<!--                        </div>-->

            <div class="layui-form-item">
                <label class="layui-form-label"><span class="x-red">*</span>上传视频：</label>
                <div class="imgcon" style="float:left;">
                </div>
                <input type="hidden" value="" name="meetingIcon" class="goods_img"  >
                <div class="addimg" style="float: left ;"  >
                    <div id="drag" class="" title="将文件拖拽到此处上传" >
                        <label for="fileupload" title="点击上传">
                            <img th:src="@{/xadmin/images/add.png}" style="height: 100px;width: 100px;"  alt="">
                            <input id="videoUrl"  type="hidden"  name="videoUrl" />
                        </label>
                    </div>
                    <input style="display: none" id="fileupload" type="file"  name="file"
                           multiple="multiple" data-url="/admin/fileUpload">
                </div>
            </div>




            <div class="layui-form-item">
                <label class="layui-form-label"><span class="x-red">*</span>视频时长：</label>
                        <div class="layui-input-inline">
                        <input type="layui-input" class="layui-input" t name="videoLength"  placeholder="修改视频时长" id="videoLength"/>
                        </div>
                        </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><span class="x-red">*</span>提交时间：</label>
                <div class="layui-input-inline">
                    <input type="layui-input" class="layui-input timeSpace" readonly="readonly"
                           autocomplete="off" name="submitTime" placeholder="请选择提交时间"/>
                </div>
                        </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><span class="x-red">*</span>视频制作人：</label>
                        <div class="layui-input-inline">
                        <input type="layui-input" class="layui-input" t name="videoMaker"  placeholder="修改视频制作人" id="videoMaker"/>
                        </div>
                        </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><span class="x-red">*</span>状态code：</label>
                        <div class="layui-input-inline">
                        <input type="layui-input" class="layui-input" t name="submitStatus"  placeholder="修改状态code" id="submitStatus"/>
                        </div>
                        </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><span class="x-red">*</span>是否删除（0是 1 否）：</label>
                        <div class="layui-input-inline">
                        <input type="layui-input" class="layui-input" t name="isDelete"  placeholder="修改是否删除（0是 1 否）" id="isDelete"/>
                        </div>
                        </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><span class="x-red">*</span>分配时间：</label>
                <div class="layui-input-inline">
                    <input type="layui-input" class="layui-input timeSpace" readonly="readonly"
                           autocomplete="off" name="allotTime" placeholder="请选择分配时间"/>
                </div>
                        </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><span class="x-red">*</span>创建时间：</label>
                <div class="layui-input-inline">
                    <input type="layui-input" class="layui-input timeSpace" readonly="readonly"
                           autocomplete="off" name="createTime" placeholder="请选择创建时间"/>
                </div>
                        </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><span class="x-red">*</span>修改时间：</label>
                <div class="layui-input-inline">
                    <input type="layui-input" class="layui-input timeSpace" readonly="readonly"
                           autocomplete="off" name="updateTime" placeholder="请选择修改时间"/>
                </div>
                        </div>
            
            <div class="layui-form-item">
                <label class="layui-form-label">
                </label>
                <button  class="layui-btn" id="subbtn" type="submit" >
                    增加
                </button>
                <button  class="layui-btn" id="reset" type="reset" >
                    重置
                </button>
            </div>
        </form>
    </div>
</div>

<!--_footer 作为公共模版分离出去-->
<div th:replace="_footer :: footerjs"></div>
<div th:replace="_ueditor :: ueditor"></div>
 <!--/_footer 作为公共模版分离出去-->
<!--请在下方写此页面业务相关的脚本-->

<link rel="stylesheet" type="text/css" th:href="@{/xadmin/lib/formSelect/formSelects-v4.css}"/>
<script type="text/javascript" th:src="@{/xadmin/lib/formselect/formSelects-v4.js}"></script>
<script th:src="@{/xadmin/lib/jQuery-File-Upload/js/vendor/jquery.ui.widget.js}"></script>
<script th:src="@{/xadmin/lib/jQuery-File-Upload/js/jquery.iframe-transport.js}"></script>
<script th:src="@{/xadmin/lib/jQuery-File-Upload/js/jquery.fileupload.js}"></script>





<script>
    layui.use(['form', 'layer','laydate'],function() {
        $ = layui.jquery;
        var form = layui.form,
            laydate = layui.laydate,
            layer = layui.layer;
        lay('.timeSpace').each(function(){
            laydate.render({
                elem: this
                ,trigger: 'click'
                ,type: 'datetime'
            });
        });
    });
 $(function(){
	$("#form-video-add").validate({
		rules:{
            draftId:{
                required: true,
			},
            draftType:{
                required: true,
			},
            videoUrl:{
                required: true,
			},
            videoLength:{
                required: true,
			},
            submitTime:{
                required: true,
			},
            videoMaker:{
                required: true,
			},
            submitStatus:{
                required: true,
			},
            isDelete:{
                required: true,
			},
            allotTime:{
                required: true,
			},
            createTime:{
                required: true,
			},
            updateTime:{
                required: true,
			},
		},
		onkeyup:false,
		debug: true,
		success:"valid",
		submitHandler:function(form){
				$(form).ajaxSubmit({
				type: 'POST',
				url: "/admin/video/add" ,
				success: function(data){
					if(data.code == "1"){
						selfmsg('添加成功!',1,function(){
							var index = parent.layer.getFrameIndex(window.name);
							parent.location.reload();
							parent.layer.close(index);
						});
					}else{
						selfmsg('添加失败!');
					}
				},
                error: function(){
					selfmsg('添加异常!',5);
				}
			});
		}
	});
});

</script>
<!--/请在上方写此页面业务相关的脚本-->
<script>

    //删除图片
    function closeImg(obj) {
        $(obj).parent().remove();
        // var goods_img = '';
        // $('.imgcon .img_div').each(function () {
        //     goods_img += $(this).find('img').attr('src') + ',';
        // })
        $('.meetingIcon').val('');
        if ($('.imgcon').children().length == 1) {
            $('.addimg').css('display', 'none');
        }
        if ($('.imgcon').children().length < 1) {
            $('.addimg').css('display', 'inline-block');
        }
    }

    //上传图片
    $(function () {
        $('#fileupload').fileupload({
            dataType: 'json',
            dropZone: $('#drag'),
            change: function (e, data) {
                var len = $('.imgcon').children().length;
                if (data.files.length > (1 - parseInt(len))) {
                    layer.msg('最多上传1张图片');
                    return false;
                }
            },
            start: function (e) {
                layer_msg = layer.msg('正在上传中…', {time: 100000000});
            },
            progressall: function (e, data) {
                $('.layui-layer-msg .layui-layer-content').html('已上传' + (data.loaded / data.total * 100).toFixed(2) + '%');
            },
            done: function (e, data) {
                layer.close(layer_msg);
                callback(data.result.msg);
            }
        });
        $('#drag').bind('drop dragover', function (e) {
            e.preventDefault();
        }).on('dragenter', function (e) {
            $(this).addClass('dragenter');
        }).on('drop', function (e) {
            $(this).removeClass('dragenter');
        }).on('dragleave', function (e) {
            $(this).removeClass('dragenter');
        });

        /**
         * 数据回调
         * @param id
         * @param value
         */
        function callback(value) {
            var $li = $(
                "<div class=\"img_div\">" +
                "<a onclick=\"$(this).attr('href', $(this).find('img').attr('src'))\" type=\"button\"  data-lightbox=\"preview\">" +
                "<video src=\"" + value + "\" alt=\"\" style='height: 200px;" +
                "width:300px;' controls=\"controls\"  preload='preload'>" +"</video>"+
                "</a>" +
                "<i class='layui-icon layui-icon-delete close' onclick='closeImg(this)'></i>" +
                "</div>"
            );
            $('.imgcon').append($li);
            if ($('.imgcon').children().length == 1) {
                $('.addimg').css('display', 'none');
            }
            // var goods_img = '';
            // $('.imgcon .img_div').each(function () {
            //     goods_img += $(this).find('img').attr('src') + ',';
            // })
            $('.goods_img').val($(this).find('img').attr('src'));
            $("#videoUrl").val(value);
        }

        //图片回显
        if ("$document.getElementsByName('name')" != '') {
            var goods_img = $(document.getElementsByName('name'));
            $('.goods_img').val(goods_img);
            // var arr = goods_img.split(',');
            // for (var i = 0; i < arr.length; i++) {
            //     if (arr[i] != '') {
            //         callback(arr[i]);
            //     }
            // }
            if ($('.imgcon').children().length == 1) {
                $('.addimg').css('display', 'none');
            }

        }
    });
</script>
</body>
</html>